<template>
	<view>
		<view class="footer_page">
			<a @click="onPageClick(1)" class="page_a">首页</a>
			<a @click="onPageClick(1)" :class="[{'page_a_click':page == 1},{'page_a':page !=1}]">1</a>
			<a @click="onPageClick(2)" :class="[{'page_a_click':page == 2},{'page_a':page !=2}]">2</a>
			<a @click="onPageClick(3)" :class="[{'page_a_click':page == 3},{'page_a':page !=3}]">3</a>
			<a @click="onPageClick(4)" :class="[{'page_a_click':page == 4},{'page_a':page !=4}]">4</a>
			<a @click="onPageClick(5)" :class="[{'page_a_click':page == 5},{'page_a':page !=5}]">5</a>
			<a @click="onPageClick(6)" :class="[{'page_a_click':page == 6},{'page_a':page !=6}]">6</a>
			<a @click="onPageClick(7)" :class="[{'page_a_click':page == 7},{'page_a':page !=7}]">7</a>
			<a @click="onPageClick(8)" :class="[{'page_a_click':page == 8},{'page_a':page !=8}]">8</a>
			<a @click="onPageClick(9)" :class="[{'page_a_click':page == 9},{'page_a':page !=9}]">9</a>
			<a @click="onPageClick(10)" :class="[{'page_a_click':page == 10},{'page_a':page !=10}]">10</a>
			<view v-show="isShowMorePage" @click="onPageClick(-1)" class="page_a_click">{{morePage}}</view>
			<a @click="onPageClick(-1)" class="page_a">下一页</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				morePage: 11,
				isShowMorePage: false,
				type:"pageClick",
			}
		},
		props: {
			msg: String
		},
		created() {
			console.log("pageView组件创建");
		},
		destroyed(){
			console.log("destroyed");
		},

		methods: {
			setType(type){
				this.type=type;
				console.log("setTypesetType",this.type);
			},
			onPageClick(pageNum) {
				if (pageNum == -1) {
					this.page = this.page + 1;
				} else {
					this.page = pageNum;
				}
				if (this.page > 10) {
					this.isShowMorePage = true;
					this.morePage = this.page;
				} else {
					this.isShowMorePage = false;
				}
				uni.$emit(this.type, this.page)
				console.log("pageClickpageClick",this.type+" "+this.page);
			},
			setIndex(index) {
				//this.page = index;
				console.log("setIndex",this.page);
			},

		}


	}
</script>

<style>
	.footer_page {
		margin-top: 10px;
		display: flex;
		justify-content: center;
	}

	.page_a {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		color: #F99B15;
		border: 1px solid #E5E5E5;
		border-right: none;
	}

	.page_a_click {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		border: 1px solid #E5E5E5;
		border-right: none;
		background: #F99B15;
		color: #FFFFFF;
	}

	.page_end {
		width: 60px;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 16px;
		color: #F99B15;
		border: 1px solid #E5E5E5;

	}

	.footer_page a:hover,
	.footer_page_on {
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
